/**
   拖拽div
   关键事件:mouseDown, mouseMove,mouseUp
**/

var paramsDrag={
    top:0,
    left:0,
    currentX:0,
    currentY:0,
    flag:false
};

/**
obj.currentStyle[attr]
getComputedStyle(obj,false)[attr] 获取DOM非行间样式
**/
var getCss=function(o,key){
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
}

var startDrag=function(bar,target,callback){
    
    if(getCss(target,'left')!='auto'){
        paramsDrag.left=getCss(target,'left');
    }
    if(getCss(target,'top')!='auto'){
        paramsDrag.top=getCss(target,'top');
    }
    bar.onmousedown=function(event){
        paramsDrag.flag=true;
        if(!event){
            event=window.even;
            bar.onselectstart=function(){ //IE和Chrome适用，防止内容被选中默认是true
                return false;
            }
        }
        var e=event;
        paramsDrag.currentX=e.clientX;
        paramsDrag.currentY=e.clientY;
    }
    
    document.onmouseup=function(){
        paramsDrag.flag=false;
        if(getCss(target,"left") !='auto'){
            paramsDrag.left=getCss(target,'left');
        }
        if(getCss(target,'top') !='auto'){
            paramsDrag.top=getCss(target,'top');
        }
    }
    document.onmousemove=function(event){
        var e=event?event:window.event;
        if(paramsDrag.flag){
            var nowX=e.clientX,nowY=e.clientY;
            var disX=nowX-paramsDrag.currentX, disY=nowY-paramsDrag.currentY;
            if(nowY < 20) {
                return;
            }
            target.style.left=parseInt(paramsDrag.left)+disX+'px';
            target.style.top=parseInt(paramsDrag.top)+disY+'px';
        }
        
        if(callback=='function'){
            callback(parseInt(paramsDrag.left)+disX,parseInt(paramsDrag.top)+disY);
        }
    }
}